<html>
<head>
  <title>Query - Showcase</title
</head>
<body>

<div style="display: none;">
  <form id="form" action="" method="get">
    <input type="text" name="text" value="foobarred">
    
    <input type="checkbox" name="checkbox" value="foo" checked>
    <input type="checkbox" name="checkbox" value="bar" checked>
    <input type="checkbox" name="checkbox" value="red">
    
    <input type="radio" name="radio" value="foo" checked>
    <input type="radio" name="radio" value="bar">
    <input type="radio" name="radio" value="red">
    
    <select name="select-s">
      <option value="foo" selected>foo</option>
      <option value="bar">bar</option>
      <option value="red">red</option>
    </select>
    <select name="select-m" multiple>
      <option value="foo" selected>foo</option>
      <option value="bar" selected>bar</option>
      <option value="red">red</option>
    </select>
    
    <textarea name="textarea">foobarred</textarea>
    
    <input type="button" name="button-input" value="Press">
    <button name="button" value="Press"></button>
    
    <input type="submit" value="Go">
  </form>
</div>

<script src="../../lib/cgu.js"></script>
<script type="text/javascript">
if (!(window.CGU && window.CGU.Version && CGU.create('Query'))) {

document.writeln("Query doesn't exist. Build with Ruby/Rake.");

} else {

CGU.create('JSON');

document.write('<pre style="font-size:11px;">');

document.writeln('================================================================================');
document.writeln('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HTTP QueryString ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');
document.writeln('~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CGU Stand-Alone Query ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');
document.writeln('================================================================================');
document.writeln('');

document.writeln('');
document.writeln('--------------------------------------------------------------------------------');
document.writeln('================================================================= Read, toOBJECT');
document.writeln('--------------------------------------------------------------------------------');
document.writeln('');

document.writeln('  <a href="', ''.concat(
    '?test=-1058.56e%2B2',
    '&demo=+!%22%23%24%25%26\'()*%2B%2C-.%2F%3A%3B%3C%3D%3E%3F%40%5B%5D%5E_%60%7B%7C%7D~',
    '&foo=b',
    '&foo=a',
    '&foo=r',
    '&%20=space',
    '&n%2Fa=',
    '&true',
    '&foo=\'',
    '&foo=d',
    '&num=-24',
    '&date=1/1/2008'
  ),
  '">sample</a>');
document.writeln('----------');
document.writeln('');
document.writeln("test    //=> " + Query.read('test'));
document.writeln("demo    //=> " + Query.read('demo'));
document.writeln("foo     //=> " + Query.read('foo'));
document.writeln("' '     //=> " + Query.read(' '));
document.writeln("n/a     //=> " + Query.read('n/a'));
document.writeln("true    //=> " + Query.read('true'));
document.writeln("date    //=> " + Query.read('date'));
document.writeln('');
document.writeln('');

document.writeln('toObject  //=> ', JSON.to(Query.toObject()).replace(/(^\{(?!\})|\],)/g, '$1\n                 ').replace(/(\}$)/g, '\n               $1'));
document.writeln('');

document.writeln('');
document.writeln('--------------------------------------------------------------------------------');
document.writeln('========================================================================== PARAM');
document.writeln('--------------------------------------------------------------------------------');
document.writeln('');

document.writeln("param({foo: 'bar', red: 'blah', l: 'Lorem ipsum.'})          //=> ", Query.param({foo: 'bar', red: 'blah', l: 'Lorem ipsum.'}));
document.writeln("param({nil: {foo: 'bar', red: 'blah'}, foo: 'bar'})          //=> ", Query.param({nil: {foo: 'bar', red: 'blah'}, foo: 'bar'}));
document.writeln("param({foo: function(){}, bar: /pattern/, red: new Date()})  //=> ", Query.param({foo: function(){}, bar: /pattern/, red: new Date()}));
document.writeln('');
document.writeln("param([123, 234, 345, 456, 567, 678, 789])  //=> ", Query.param([123, 234, 345, 456, 567, 678, 789]));
document.writeln('');

document.writeln('');
document.writeln('--------------------------------------------------------------------------------');
document.writeln('====================================================================== SERIALIZE');
document.writeln('--------------------------------------------------------------------------------');
document.writeln('');

var form = document.getElementById('form');
document.writeln('serialize(form)           //=> ', Query.serialize(form));
document.writeln('serialize(form.elements)  //=> ', Query.serialize(form.elements));
document.writeln('');
document.writeln(' // see source for form HTML');
document.writeln('');

document.write('</pre>');

}
</script>

</body>
</html>
